<html lang="en" itemscope itemtype="http://schema.org/WebPage">

<head>
  <title>
    {{lang.global.title.accessory}} | Valora | GamerNoTitle
  </title>
  {% include "public/head.html" %}
</head>

<body class="index-page">
  {% include 'public/body.html' %}

  {% include 'public/components/announcement.html' %}

  {% include 'public/components/nav.html' %}

  {% include 'public/components/header.html' %}

  {% include "public/components/market/accessory_buttons.html" %}
  <div class="container">
    <div class="row text-center py-2 mt-3">
      <div class="col-12 mx-auto">
        <div class="alert alert-pink text-white rounded" role="alert">
          <span class="alert-icon"><i class="ni ni-like-2"></i></span>
          {{lang.accessory.welcome.opening}} {% if not accesstokenlogin
          %}<strong>{{player.name}}</strong>#<strong>{{player.tag}}</strong><br> {% else %} <strong>N/A</strong><br> {%
          endif %}
          {{lang.accessory.welcome.credit}} <img
            src="https://cdn.bili33.top/gh/GamerNoTitle/Valora@master/assets/img/VP.png" height=16px width=16px>
          <strong>{{player.vp}}</strong> <img
            src="https://cdn.bili33.top/gh/GamerNoTitle/Valora@master/assets/img/RP.png" height=16px width=16px>
          <strong>{{player.rp}}</strong> <img
            src="https://cdn.bili33.top/gh/GamerNoTitle/Valora@master/assets/img/KC.png" height=16px width=16px>
          <strong>{{player.kc}}</strong>
        </div>
      </div>
    </div>
  </div>
  {% if pc %}
  <!-- Desktop Devices -->
  <div class="container">
    <h1 class="text-gradient text-primary mb-0 mt-2" align="center">{{lang.accessory.title}}</h1>
    <br>
    <div class="table-responsive">
      <table class="table" id="market-table" width=100%>
        <thead>
          <tr>
            <th class="text-center">{{lang.accessory.table.name}}</th>
            <th class="text-center">{{lang.accessory.table.preview}}</th>
            <th class="text-center"><img
                src="https://cdn.bili33.top/gh/GamerNoTitle/Valora@master/assets/img/KC-black.png" width=24px
                height=24px>
              {{lang.accessory.table.cost}}</th>
          </tr>
        </thead>
        <tbody>
          {% for accessory in accessory_list %}
          <tr>
            <td class="text-center">
              <h3 class="text-gradient text-primary mb-0 mt-2">{{accessory.name|safe}}</h3>
            </td>
            <td class="text-center">
              {% if accessory.preview %}
              <div class="gun-image"><a href="{{accessory.img|safe}}" data-fancybox="gallery">{% if accessory.small
                  %}<img height="80px" src={{accessory.small}}> {% endif %}<img height="80px"
                    src={{accessory.preview|safe}}></a></div>
              {% else %}

              {% endif %}
            </td>
            <td class="text-center">
              <h3 class="text-gradient text-dark mb-0 mt-2">{{accessory.cost|safe}}</h3>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  {% else %}
  <!-- Mobile Devices -->
  <div class="container">
    <h1 class="text-gradient text-primary mb-0 mt-2" align="center">{{lang.accessory.title}}</h1>
    <br>
    <div class="row">
      {% for accessory in accessory_list %}
      <div class="col-md-4">
        <div class="card mb-4 shadow-sm rounded">
          {% if accessory.preview %}
          <div class="gun-image">
            <a href="{{accessory.img|safe}}" data-fancybox="gallery">
              <img height=auto width=100% class="text-center" src={{accessory.preview|safe}}>
            </a>
          </div>
          {% endif %}
          <div class="card-body">
            <h3 class="text-gradient text-primary mb-0 mt-2">{{accessory.name|safe}}</h3>
            <h3 class="text-gradient text-dark mb-0 mt-2"><img
                src="https://cdn.bili33.top/gh/GamerNoTitle/Valora@master/assets/img/KC-black.png" width=24px
                height=24px>
              {{accessory.cost|safe}}</h3>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
  </div>
  </div>

  {% endif %}
  {% include "public/footer.html" %}
</body>